<template>
	<view style="display: flex;flex-direction: column; align-items: center;">
		<!-- 用户信息区域 -->
		<view class="animation-slide-left" style="background-color: #F7F8FF;width: 750rpx; height: 150rpx; display: flex;justify-content: space-between; align-items: center;">
			<view style="display: flex; align-items: center;">
				<!-- 头像 -->
				<!-- <image mode="aspectFill" :src="myUserInfo.avatar" style="width: 110rpx;height: 110rpx;margin-left: 24rpx;border-radius: 50%;"></image> -->
				<open-data class="user-avatar" type="userAvatarUrl" style="width: 110rpx;height: 110rpx;margin-left: 24rpx;border-radius: 50%;"></open-data>
				<!-- 昵称账号 -->
				<view style="display: flex;flex-direction: column;margin-left: 29rpx;">
					<!-- <view style="font-size: 30rpx;color: #333333;" >{{ myUserInfo.nickname }}</view> -->
					<!-- <open-data class="user-avatar" type="userAvatarUrl"></open-data> -->
					<open-data class="user-name" type="userNickName" style="font-size: 30rpx;color: #333333;"></open-data>
					<view style="font-size: 24rpx;color: #666666;margin-top: 10rpx;"  >账号：
					<text style="font-size: 24rpx;color: #333333;" >{{ myUserInfo.mobile }}</text>
						<!-- <u-count-to :start-val="0" font-size="24rpx" :end-val="myUserInfo.mobile"></u-count-to> -->
					</view>
				</view>
			</view>

			<view style="margin-right: 24rpx;"></view>
		</view>

		<!-- 余额、累计返利、我的卡券 -->
		<view class="animation-slide-left" v-if="group_id !== 2" style="display: flex;justify-content: space-between;width: 600rpx;margin-top: 39rpx;">
			<!-- @click="GO('recharge',myUserInfo.money)" 去掉余额充值 -->
			<view @click="GO('recharge',myUserInfo.money)" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view style="font-size: 32rpx;color: #F07203;" >￥{{ myUserInfo.money ? myUserInfo.money : 0.00 }}</view>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">钱包余额</view>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;" @click="GO('myRebate')">
				<view style="font-size: 32rpx;color: #F07203;">￥{{ myUserInfo.accumulated_rebate ? myUserInfo.accumulated_rebate : 0.00 }}</view>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">累计返利</view>
			</view>
			<view @tap="goCard" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view style="font-size: 32rpx;color: #F07203;">{{ myUserInfo.coupons_num ? myUserInfo.coupons_num : 0 }}</view>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">我的卡券</view>
			</view>
		</view>

		<view
			v-if="group_id === 2"
			style="display: flex;
			justify-content: space-around;
			width: 600rpx;
			margin-top: 39rpx;"
		>
			<!-- nocomment 已完成列表需要  complete个人中心展示-->
			<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;" @click="GO1('nocomment')">
				<!-- <view style="font-size: 32rpx;color: #F07203;" v-if="nocomplete == 0 && '' ">0</view> -->
				<view style="font-size: 32rpx;color: #F07203;">{{ complete == 0 ? 0 : complete }}</view>
				<!-- <view style="font-size: 32rpx;color: #F07203;" >52</view> -->
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">已完成</view>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;" @click="GO1('nopay')">
				<!-- <view style="font-size: 32rpx;color: #F07203;" v-if="nocomplete == 0 && '' ">0</view> -->
				<view style="font-size: 32rpx;color: #F07203;">{{ nocomplete == 0 ? 0 : nocomplete }}</view>
				<!-- <view style="font-size: 32rpx;color: #F07203;" >52</view> -->
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">未完成</view>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;" @click="GO1('all')">
				<view style="font-size: 32rpx;color: #F07203;">{{ completeall == 0 ? 0 : completeall }}</view>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">订单总数</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 20rpx;margin-top: 39rpx;background-color: #F7F8FF;"></view>

		<!-- 订单入口区域 -->
		<view v-if="group_id === 1" @click="GO1('all')" style="font-size: 30rpx;color: #333333;width: 700rpx; display: flex;justify-content: space-between;margin-top: 30rpx;">
			<view >全部订单</view>
			<view style="color: #E0E0E0;"><u-icon name="arrow-right" style="float: right;"></u-icon></view>
		</view>
		<view v-if="group_id === 1" style="display: flex;justify-content: space-between;width: 600rpx;margin-top: 39rpx;">
			<!-- @click="GO(2)" -->
			<view @click="GO1('nopay')" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image src="../static/my/paid.png" mode="aspectFill" style="width: 48rpx;height: 48rpx;"></image>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">待付款</view>
			</view>
			<!-- @click="GO(3)" -->
			<view @click="GO1('nosend')" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image src="../static/my/paidok.png" mode="aspectFill" style="width: 48rpx;height: 48rpx;"></image>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">已付款</view>
			</view>
			<!-- @click="GO(4)" -->
			<view @click="GO1('nocomment')" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image src="../static/my/complete.png" mode="aspectFill" style="width: 48rpx;height: 48rpx;"></image>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">已完成</view>
			</view>
			<!-- @click="GO(5)" -->
			<view @click="GO12('nosend')" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image src="../static/my/reMoney.png" mode="aspectFill" style="width: 48rpx;height: 48rpx;"></image>
				<view style="font-size: 24rpx;color: #666666;margin-top: 13rpx;">退款</view>
			</view>
		</view>

		<!-- 分割线 -->
		<view style="width: 100%;height: 20rpx;margin-top: 39rpx;background-color: #F7F8FF;"></view>

		<!-- 入口列表 -->
		<!-- 预约待办 -->
		<view v-if="group_id === 1" style="display: flex;justify-content: space-between;width: 700rpx; height: 100rpx;   align-items: center;" @click="GO1('nopay')">
			<!-- @click="GO('placeOrder')" -->
			<view style="display: flex;align-items: center;"  >
				<image mode="aspectFill" src="../static/my/appointment.png" style="width: 32rpx;height: 32rpx;"></image>
				<view style="margin-left: 26rpx;">
					<view class="share"><button class="u-reset-button btn">预约待办</button></view>
				</view>
			</view>
			<view><u-icon name="arrow-right" style="float: right;"></u-icon></view>
		</view>
		<!-- 分割线 -->
		<view v-if="group_id === 1" style="width: 702rpx;height: 1px;background-color: #F7F8FF;"></view>

		<!-- 邀请好友 -->
		<view v-if="group_id === 1" style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;  height: 100rpx;  position: relative;">
			<!-- @click="GO('invitation')" -->
			<view style="display: flex;align-items: center;">
				<image mode="aspectFill" src="../static/my/frind.png" style="width: 32rpx;height: 32rpx;"></image>
				<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">
					<view class="share"><button class="u-reset-button btn">分享好友</button></view>
				</view>
				<button  open-type="share"  class="u-reset-button" style="width: 700rpx; height: 100rpx; background-color: transparent;position: absolute; top: 0; left: 0; "></button>
			</view>
			<view><u-icon name="arrow-right" style="float: right;"></u-icon></view>
		</view>
		<!-- 分割线 -->
		<view v-if="group_id == 1" style="width: 100%;height: 20rpx;background-color: #F7F8FF;"></view>
		<u-popup v-model="show1" mode="bottom" border-radius="14" height="250rpx">
			<view class="ddd"><button class="cu-btn" open-type="getPhoneNumber" @getphonenumber="getMobileNum">获取手机号码</button></view>
		</u-popup>

		<!-- 常见问题 -->
		<!-- 	<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;">
			<view style="display: flex;align-items: center;">
				<image mode="aspectFill" src="../static/my/common_problem.png" style="width: 32rpx;height: 32rpx;"></image>
				<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">常见问题</view>
			</view>
			<view>></view>
		</view> -->
		<!-- 分割线 -->
		<!-- <view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view> -->

		<!-- 意见反馈 -->
		<!-- 	<view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;">
			<view style="display: flex;align-items: center;">
				<image mode="aspectFill" src="../static/my/opinion.png" style="width: 32rpx;height: 32rpx;"></image>
				<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">意见反馈</view>
			</view>
			<view>></view>
		</view> -->
		<!-- 分割线 -->
		<!-- <view style="width: 702rpx;height: 1px;background-color: #F7F8FF;margin-top: 30rpx;"></view> -->
		<!-- 设置 -->
		<!-- <view style="display: flex;justify-content: space-between;width: 700rpx;align-items: center;margin-top: 30rpx;">
			<view style="display: flex;align-items: center;">
				<image mode="aspectFill" src="../static/my/setUP.png" style="width: 32rpx;height: 32rpx;"></image>
				<view style="font-size: 28rpx;color: #333333;margin-left: 26rpx;">设置</view>
			</view>
			<view>></view>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: '',
			group_id: '',
			myUserInfo: {
				/**
				 * id
				 * nickname	昵称
				 * money	余额
				 * avatar	头像?
				 * coupons_num	优惠券数量
				 * accumulated_rebate	累计返利
				 */
			},
			myemployeesInfo: {},
			nocomplete: '',
			complete: '',
			completeall: '', //新增全部订单
			show1: false,
		};
	},
	// onShareAppMessage() {
	// 私有分享单独页面
	// return {
	//   title: "汽车服务邀请你",//share_id
	//   path: "/pages/index/index?id=" + uni.getStorageSync('id'),
	//   imageUrl:
	//     "http://qichefuwu.oss-cn-chengdu.aliyuncs.com/uploads/20210303/eaf292e8ae069ecf266be10ebfe014bc.png",
	// 	// "/static//wenzhangpeitu.jpg",
	// 	success: function (res) {
	//     if (res.errMsg == "shareAppMessage:ok") {
	//     }
	//   },
	// };
	// },
	onLoad() {
		
			this.getUserInfo();
			let ret = uni.getStorageSync('id');
		
		
		
	},
	onShow() {
		
			this.getUserInfo();
			var usrInfo = uni.getStorageSync('usrInfo');
			var phoneNumber = uni.getStorageSync('phoneNumber');
			if (!usrInfo.mobile && !phoneNumber) {
				this.show1 = true;
			}
		
		
	},
	methods: {
		GO(path,money){
			this.$Router.push({
				name:path,
				query:{
					money:money,
					group_id:this.group_id,
				}
			})
		},

		async getMobileNum(e) {
			const [err, res] = await uni.login().catch(err => err);

			const obj = {
				encryptedData: e.detail.encryptedData,
				iv: e.detail.iv,
				code: res.code,
			};
			this.get(obj);
		},

		async get(obj) {
			console.log('obj :>> ', obj);
			const res = await this.$request.post('addons/shopro/user/decryption', {
				data: obj,
			});
			var phoneNumber = res.data.data.phoneNumber;
			console.log('phoneNumber',phoneNumber)
			uni.setStorageSync('phoneNumber', phoneNumber);
			this.show1 = false
		},

		GO1(type) {
			this.$Router.push({
				name: 'orderList',
				params: {
					type: type,
				},
			});
		},
		GO12(type) {
			this.$Router.push({
				name: 'sborderList',
				params: {
					type: type,
				},
			});
		},
		// 不需要调取，全局设置
		// async youhui(){
		// 	// uni.showLoading({
		// 	// 	title:"loading..."
		// 	// })
		// 	let res
		// 	try {
		// 		res = await this.$request.post('addons/shopro/share/add',{
		// 			data:{
		// 				share_id:uni.getStorageSync('id')
		// 			},
		// 		});

		// 		uni.showToast({
		// 			title:res.data.data.data[0].description,
		// 			icon:'none'
		// 		});
		// 	} catch (e) {
		// 		//TODO handle the exception
		// 		console.log('e===', e);
		// 		return uni.showToast({
		// 			title: '网络连接失败！',
		// 			icon: 'none'
		// 		});
		// 	}
		// },
		// console.log(res,'--------------------')
		// GO(type) {
		// 	if(type === 1){
		// 		this.type = '选1'
		// 	}else if(type === 2) {
		// 		this.type = '选二'
		// 	}else if(type === 3) {
		// 		this.type = '选三'
		// 	}else if(type === 4) {
		// 		this.type = '选四'
		// 	}else if(type === 5) {
		// 		this.type = '选五'
		// 	}
		// 	console.log("type: ",this.type);
		// 	// this.type = type
		// 	// this.$Router.push({
		// 		// name: pagePath
		// 	// });
		// },
		// 获得用户信息

		// dc10f2e3-f4cf-45a7-990e-3942974ba1af  token
		// dc10f2e3-f4cf-45a7-990e-3942974ba1af   helper mytoken写死

		async getUserInfo() {
			let res;
			try {
				res = await this.$request.post('addons/shopro/user/index');
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			this.myUserInfo = res.data.data;
			this.group_id = res.data.data.group_id;

			this.myemployeesInfo = res.data.data;

			if (this.group_id === 2) {
				uni.setStorageSync('group_id', this.group_id);
				this.getemployeesInfo();
			} else {
				uni.setStorageSync('group_id', this.group_id);
			}
			// return;
		},
		async getemployeesInfo() {
			let res;
			try {
				res = await this.$request.post('addons/shopro/staff/index');
			} catch (e) {
				//TODO handle the exception
				console.log('e===', e);
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}
			this.myemployeesInfo = res.data.data;
			this.nocomplete = res.data.data.nocomplete; //未完成订单
			console.log('this.nocomplete: ', this.nocomplete);
			this.complete = res.data.data.complete; //未完成订单
			console.log('getemployeesInfo===', res.data.data);
			this.completeall = res.data.data.completeall; //未完成订单
		},
		// 获取员工信息
		goCard() {
			this.$Router.push({
				name: 'myCard',
			});
		},
	},
};
</script>

<style lang="scss" scoped>
	@keyframes aminst
	{
		0% {
			color: #09BB07;
		}
		100% {
			color: red;
		}
	}
	
	
	.aminst {
		animation:aminst 5s infinite;
		-webkit-animation:aminst 5s infinite; /* Safari 和 Chrome */
	}
	
	.user-avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		// margin-bottom: 40rpx;
	}
	.user-name {
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(132, 87, 8, 1);
		// margin-bottom: 30rpx;
	}
	
	
/deep/.ddd {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cu-btn {
	height: 70rpx;
	font-size: 30rpx;
	width: 690rpx;
	margin: 0 auto !important;
	color: #ffffff;
	background-color: #93c5ff;
}
.share {
	// color: #ef9d1c;
	font-size: 25rpx;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	align-items: center;

	.btn {
		// border: 1px solid #ef9d1c;
		// border-radius: 15px;
		// line-height: 1.8;
		// text-align: center;
		// font-size: 23rpx;
		// background: transparent;
	}
	.u-reset-button {
		padding: 0;
		font-size: inherit;
		line-height: inherit;
		background-color: transparent;
		color: inherit;
	}

	.u-reset-button::after {
		border: none;
	}
}
</style>
